<template>
	<view>
		<uni-nav-bar statusBar fixed :border="false" ref="uniNavBar">
			<view class="flex-1 flex align-center justify-center">
				<view class="px-2 py-2 font-weight-bold" v-for="(item,index) in tabList" :key="index" :id="'tab'+index"
					@click="onChangeTab(index)">
					<text :class="tabIndex===index ?'text-main font-lg':'text-drak font-md'">{{item}}</text>
				</view>
			</view>
			<view class="p-2" hover-class="text-main" slot="right">
				<text class="iconfont icon-fatie_icon font-md"></text>
			</view>
		</uni-nav-bar>
		<swiper :duration="150" :style="{height:scrollH+'px'}" :current="tabIndex" @change="onSwiperChange">
			<swiper-item>
				<scroll-view scroll-y="true" :style="{height:scrollH+'px'}">
					<block v-for="(item,index) in postList" :key="index">
						<post-item :item="item" :index="index"></post-item>
						<divider />
					</block>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" :style="{height:scrollH+'px'}">
					<view class="border-bottom py-3 px-2">
						<view class="flex align-center justify-between ">
							<view class="font-md">热门分类</view>
							<view class="text-muted font-md flex align-center justify-center">
								更多
								<text class="iconfont icon-jinru font-md"></text>
							</view>
						</view>
						<scroll-view scroll-x="true" class="scroll-row mt-2">
							<view class="scroll-row-item tag-item px-2 bg-light rounded mx-1"
								hover-class="bg-hover-light" 
								v-for="(item,index) in topicList" :key="index"
								@click="onClassClick(item)"
								>
								{{item.classname}}</view>
						</scroll-view>
					</view>
					<view class="p-2">
						<view class="search-box rounded flex align-center justify-center text-light-muted"
							@click="goSearch">
							<text class="iconfont icon-sousuo"></text>
							<text class="ml-2">搜索话题</text>
						</view>
						<swiper class="banner-swiper mt-2" :indicator-dots="bannerList.length>1 ? true:false" :autoplay="true" :interval="3000"
							:duration="1000">
							<swiper-item v-for="(item,index) in bannerList" :key="index">
								<image class="banner-img rounded w-100" :src="item.src" mode="aspectFill"></image>
							</swiper-item>
						</swiper>
					</view>
					<divider />
					<view class="p-2">
						<view class="text-dark font-md">最近更新</view>
						<block v-for="(item,index) in hottopicList" :key="item.id">
							<topic-item :item="item" :index="index"></topic-item>
						</block>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	const demo = [{
			"id": 13,
			"user_id": 13,
			"title": "12132",
			"titlepic": "",
			"content": "12132",
			"sharenum": 0,
			"path": "未知",
			"type": 0,
			"create_time": 1559543916,
			"post_class_id": 1,
			"share_id": 0,
			"isopen": 1,
			"status": 1,
			"ding_count": 0,
			"cai_count": 1,
			"comment_count": 0,
			"user": {
				"id": 13,
				"username": "13838389876",
				"userpic": "http://...png",
				"fens": []
			},
			"images": [],
			"share": null,
			"support": []
		},
		{
			"id": 13,
			"user_id": 13,
			"title": "12132",
			"titlepic": "",
			"content": "12132",
			"sharenum": 0,
			"path": "未知",
			"type": 0,
			"create_time": 1559543916,
			"post_class_id": 1,
			"share_id": 0,
			"isopen": 1,
			"status": 1,
			"ding_count": 0,
			"cai_count": 1,
			"comment_count": 0,
			"user": {
				"id": 13,
				"username": "...",
				"userpic": "http://...png",
				"fens": []
			},
			"images": [],
			"share": null,
			"support": []
		},
		{
			"id": 13,
			"user_id": 13,
			"title": "12132",
			"titlepic": "",
			"content": "12132",
			"sharenum": 0,
			"path": "未知",
			"type": 0,
			"create_time": 1559543916,
			"post_class_id": 1,
			"share_id": 0,
			"isopen": 1,
			"status": 1,
			"ding_count": 0,
			"cai_count": 1,
			"comment_count": 0,
			"user": {
				"id": 13,
				"username": "...",
				"userpic": "http://...png",
				"fens": []
			},
			"images": [],
			"share": null,
			"support": []
		},
		{
			"id": 13,
			"user_id": 13,
			"title": "12132",
			"titlepic": "",
			"content": "12132",
			"sharenum": 0,
			"path": "未知",
			"type": 0,
			"create_time": 1559543916,
			"post_class_id": 1,
			"share_id": 0,
			"isopen": 1,
			"status": 1,
			"ding_count": 0,
			"cai_count": 1,
			"comment_count": 0,
			"user": {
				"id": 13,
				"username": "...",
				"userpic": "http://...png",
				"fens": []
			},
			"images": [],
			"share": null,
			"support": []
		}
	]
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue'
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				tabIndex: 0,
				tabList: ['关注', '话题'],
				postList: [],
				scrollH: 600,
				topicList: ['关注', '推荐', '体育', '热点', '娱乐', '财经'],
				bannerList: [],
				hottopicList:[],//热门话题
			};
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight - uni.upx2px(44);
				}
			})
			uni.showLoading({
				title: '加载中'
			})
			setTimeout(() => {
				let list = demo.map(v => {
					return this.$U.formatCommonList(v)
				})
				this.postList = list;
				uni.hideLoading()
			}, 2000)
		},
		methods: {
			// 获取所有话题分类
			getTopicClass() {
				this.$H.get('/topicclass').then(res => {
					this.topicList = res?.list || [];
				})
			},
			// 获取热门话题
			getHotTopicData() {
				this.$H.get('/hottopic').then(res => {
					this.hottopicList = res?.list || [];
				})
			},
			// 获取广告列表
			getBannerList() {
				this.$H.get('/adsense/1').then(res=> {
					this.bannerList = res?.list || [];
				})
			},
			onChangeTab(index) {
				this.tabIndex = index;
			},
			onSwiperChange(e) {
				const index = e.detail.current;
				this.tabIndex = index;
				if (index === 1) {
					this.getTopicClass()
					this.getHotTopicData()
					this.getBannerList()
				}
			},
			goSearch() {
				uni.navigateTo({
					url: '/pages/search/search?type=moment'
				})
			},
			// 根据分类id跳转到指定分类列表
			onClassClick(item) {
				uni.navigateTo({
					url:'/pages/topic-class/topic-class?id='+item.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.tag-item {
		background-color: #F5F4F2;
	}
	.search-box {
		height: 88rpx;
		background-color: #F5F4F2;
	}
	.banner-swiper {
		height: 300rpx;
		.banner-img {
			height: 300rpx;
		}
	}

</style>